import React, { Component } from "react";
import { View, Text, ScrollView, TouchableOpacity } from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { INVITE } from "../../config/Api";
import moment from "moment";
import { isScrollBottom } from "../../util/util";
import inviteStyles from "../../style/pages/InviteFriend";

class InvitedFriendList extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "已邀請列表",
        headerRight: []
      },
      navigation
    );
  state = {
    count: 0,
    pageNo: 0,
    list: [],
    totalPage: 0
  };

  async getInvites() {
    if (this.state.pageNo === this.state.totalPage && this.state.pageNo > 0)
      return;
    let data = await http.get(INVITE, {
      page: this.state.pageNo
    });

    this.setState({
      count: data.data.count,
      pageNo: this.state.pageNo + 1,
      list: data.data.list,
      totalPage: Math.ceil(data.data.count / data.data.take)
    });
  }

  contentViewScroll(e) {
    isScrollBottom(e, () => {
      this.getInvites();
    });
  }

  componentDidMount() {
    this.getInvites();
  }

  render() {
    return (
      <View style={inviteStyles.friendContainer}>
        <Text style={inviteStyles.friendHead}>
          已邀請註冊{" "}
          <Text style={inviteStyles.headSpan}>{this.state.count}</Text>
        </Text>

        <ScrollView
          style={inviteStyles.frinedList}
          onMomentumScrollEnd={this.contentViewScroll.bind(this)}
        >
          <View style={inviteStyles.friendListItem}>
            <Text style={inviteStyles.friendPhoneOrDate}>手機號</Text>
            <Text style={inviteStyles.friendPhoneOrDate}>日期</Text>
          </View>

          {this.state.list.map(item => (
            <View style={inviteStyles.friendListItem} key={item.id}>
              <Text style={inviteStyles.friendPhoneOrDate}>{item.tel}</Text>
              <Text style={inviteStyles.friendPhoneOrDate}>
                {moment(new Date(item.createtime)).utcOffset(new Date(item.createtime).getTimezoneOffset()).format("YYYY-MM-DD")}
              </Text>
            </View>
          ))}
        </ScrollView>

        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("InviteFriend")}
        >
          <Text style={inviteStyles.inviteButton}>邀請好友</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default InvitedFriendList;
